<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<<<<<<< HEAD

<html lang="zh-CN">
${token}
=======
<html lang="zh-CN">
<%--${token}--%>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
	<head>
		<meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>图书在线首页</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link href="${pageContext.request.contextPath}/static/front/css/bootstrap.css" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script src="${pageContext.request.contextPath}/static/front/js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="${pageContext.request.contextPath}/static/front/js/bootstrap.min.js"></script>

		<script src="${pageContext.request.contextPath}/static/back/lib/layui/layui.js" charset="utf-8"></script>
		<link href="${pageContext.request.contextPath}/static/back/lib/layui/css/layui.css" rel="stylesheet">
		
		<style>
			
			.table td{
				 vertical-align:middle !important;
			}
		</style>
	</head>

	<body>
		<!-- 头部页面 -->
		<jsp:include page="header.jsp"/>

		<!-- 主体部分 -->
		<div class="container">
			<!-- 广告 -->
			<div class="row">
				<div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px; ">
					<img src="${pageContext.request.contextPath}/static/front/img/ad.jpg " style="width: 99%; "/>
				</div>
			</div>
			<!--主体信息-->
			<table class="table">
				<thead>
					<tr class="active">
						<th colspan="4">书籍</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="bagItems">
                    <c:forEach items="${carts}" var="cart">
                        <tr>
							<td class="bookId" style="display: none">${cart.bookId}</td>
<<<<<<< HEAD
                            <td><img style="width: 100px;height: 100px" src="${pageContext.request.contextPath}/${cart.img}"></td>
=======
                            <td><img style="width: 100px;height: 100px" src="${cart.img}"></td>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
                            <td>${cart.bookName}</td>
                            <td>${cart.author}</td>
                            <td>${cart.publisher}</td>
                            <td>${cart.price}</td>
<<<<<<< HEAD
                            <td class="numb"><input type="number" value='${cart.numb}' min="1" onchange="numbChange(this,'${cart.price}')"  style="width: 50px;"/></td>
=======
                            <td class="numb"><input type="number" value="${cart.numb}" min="1" onchange="numbChange(this,'${cart.price}')"  style="width: 50px;"/></td>
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
                            <td class="total">${cart.total}</td>
                            <td><a href="javascript:void(0)">删除</a></td>
                        </tr>
                    </c:forEach>
				</tbody>
			</table>
			<div class="text-right">商品总金额:&yen; <span class="price" id="orderMoney">88</span> 点券</div>
			<div class="row text-right" style="padding-right: 20px;margin-top: 10px;">
				<a href="javascript:void(0)" style="margin-right: 10px;">清空我的书包</a>
				<c:if test="${empty carts}">
					<a class="btn btn-danger" disabled href="javascript:void(0)" onclick="account()">去结算</a>
				</c:if>
				<c:if test="${!empty carts}">
					<a class="btn btn-danger" href="javascript:void(0)" onclick="account()">去结算</a>
				</c:if>
			</div>
		</div>
		
		
		<!--页脚-->
		<div class="container" style="margin-top: 10px;">
			<div class="row">
				<div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;">
					<img src="${pageContext.request.contextPath}/static/front/img/footer.jpg" style="width: 98%;"/>
				</div>
			</div>
		</div>
		<hr />
		
		<!--友情链接和版权信息-->
		<div class="container" style="margin-top: 10px;">
			<div class="row">
				<div class="" align="center">
					<ul class="list-inline">
						<li><a>关于我们</a></li>
						<li><a>联系我们</a></li>
						<li><a>招贤纳士</a></li>
						<li><a>法律声明</a></li>
						<li><a>友情链接</a></li>
						<li><a>支付方式</a></li>
						<li><a>配送方式</a></li>
						<li><a>服务声明</a></li>
						<li><a>广告声明</a></li>
					</ul>
				</div>
				<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
					Copyright &copy; 2003-2017 书城 版权所有
				</div>
			</div>
		</div>

	</body>
<script>
	var layer;
	$(function () {
		layui.use('layer',function () {
			layer = layui.layer;
		})
		orderMoney();
	})
	function numbChange(obj,price) {
		var numb = obj.value;
		$(obj).parent().next('td').html((numb*price).toFixed(2))
		orderMoney()
	}
	function orderMoney() {
		var sum = 0;
		var totals = $(".total");
		for(let i=0;i<totals.length;i++){
			sum+=parseFloat($(totals[i]).html())
		}
		$("#orderMoney").html(sum.toFixed(2))
	}
<<<<<<< HEAD
=======

>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
	function account() {
		var bookIds = $(".bookId");
		var numbs = $(".numb");
		var totals = $(".total");
		var order = [];
		for(let i=0;i<bookIds.length;i++){
			var obj = {"bookId":$(bookIds[i]).html(),"numb":$(numbs[i]).children().val(),"total":$(totals[i]).html()}
			order.push(obj)
		}
<<<<<<< HEAD
		$.ajax({
			url:'${pageContext.request.contextPath}/front/cartaccout',
			data:JSON.stringify(order),//json对象转json格式的字符串
			contentType:'application/json',//告诉服务器提交的是json格式数据
=======
		console.log(order)
		$.ajax({
			url:'${pageContext.request.contextPath}/front/cartaccout',
			data:JSON.stringify(order),
			contentType:'application/json',
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
			headers:{'token':'${token}'},
			type:'POST',
			dataType:'JSON',
			success:function (res) {
				layer.msg(res.message,function () {
					if (res.code === 100){
						location.href = '${pageContext.request.contextPath}/front/orderinfo?orderNumber='+res.data
					}
				})

			}
		})

	}

</script>


</html>